<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字提示框</title>
	</head>
	<style>
		/* 定义按钮样式 */
		.btn {
			top: 200px;
			background-color: #4CAF50;        /* 按钮背景颜色为绿色 */
			border: none;                     /* 去掉按钮边框 */
			color: white;                     /* 字体颜色为白色 */
			padding: 15px 32px;               /* 按钮内边距为15像素顶部和底部，32像素左右 */
			text-align: center;               /* 文本居中对齐 */
			text-decoration: none;            /* 去掉文本装饰 */
			display: inline-block;            /* 将按钮显示为块级元素 */
			font-size: 16px;                  /* 字体大小为16像素 */
			margin: 4px 2px;                  /* 按钮外边距为4像素顶部和底部，2像素左右 */
			cursor: pointer;                  /* 鼠标悬停时显示指针形状 */
		}
		
		.tip{
			position: relative;    /* 相对定位 */
		}
		
		.tip::after{
			content: attr(tip-content);
			background-color: darkorchid;
			color: #000;
			position: absolute;   /* 绝对定位 */
			top: 0;
			left: 50%;
			width: auto;
			height: 25px;
			border-radius: 10px;
			
			/* calc减号中间需要有空格 */
			transform: translate(-50% ,calc(-100% - 10px ));  /*-50%  整个内容居中 */    /* -100% 垂直方向移动到顶部 */   /* calc(-100%-10px)在往上移动点距离 */
		}
		
		.tip::before{
			content: '';
			position: absolute;
			background-color: darkorchid;
			width: 15px;
			height: 15px;
			top: 0;
			left: 50%;
			/* calc减号中间需要有空格 */                      /* 翻转45度 */
			transform: translate(-50% ,calc(-100% - 5px ))   rotate(45deg);
		}
		
		/* 初始状态下不显示 */
		.tip::after,.tip::before{
			display:none;
		}
		
		/* 	选中的时候显示 */
		.tip:hover::after,.tip:hover::before{
			display: block;
		}
		
	</style>
	<body>
		<button class="btn tip" tip-content="提示内容">
			按钮
		</button>
		
		
		<div class="tip" tip-content="提示内容2222" style="background-color: #4CAF50;">
			按钮
		</div>
		
		
		
		<input type="text" placeholder="请输入提示内容" class="input_tip">
			
		<script>
			document.querySelector(".input_tip").addEventListener('input',function(e){
				let btn=document.querySelector(".btn");
				console.log(e.target.value);
				btn.setAttribute("tip-content",e.target.value);
			});
			
		</script>
	</body>
</html>